<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js13_dom02</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-15 -->
	<script type="text/javascript">
		function getAllH1() {
			var ah = document.getElementsByTagName("h1");
			for(var i=0;i<ah.length;i++) {
				// 获取节点中的文本内容
				// alert(ah[i].innerHTML);
				// // 获取节点的名称
				// alert(ah[i].nodeName);
				// // 获取节点的类型
				// alert(ah[i].nodeType);
				// // 获取节点中的值,节点中的值只是在针对文本节点时有用
				// alert(ah[i].nodeValue);
				// // 获取某个节点的文本节点
				// alert(ah[i].firstChild.nodeType);
				// 获取某个文本节点的值，对于FireFox而言文本的空格不一致，对于IE而言，仅仅只会把换行加入空白，FF是全部空白
				// 所以在获取文本节点值的时候要去掉空格
				alert("|"+ah[i].firstChild.nodeValue+"|");
			}
		}
		
		function getCH1() {
			var con = document.getElementById("content");
			var h2 = con.getElementsByTagName("h2");
			// 得到的H2元素是一个数组
			alert(h2[0].innerHTML);
			// 通过h2节点找到h3中的span的值
			var pn = h2[0].parentNode;
			// 通过父节点找到h3节点
			var h3 = pn.getElementsByTagName("h3")[0];
			// 通过h3找span
			var s = h3.getElementsByTagName("span")[0];
			alert(s.innerHTML);
		}
		
	</script>
</head>
<body>
	<div id="content">
		<h1>
			aaaaaaaaaaaaa1
			<span>aaaaaaaaaaasssss</span>
		</h1>
		<h2>
			bbbbbbbbbb1
			<span>bbbbbbbbggggg</span>
		</h2>
		<h3>
			cccccccccc
			<span>cccccccccccssss</span>
		</h3>
	</div>
	<h1>
		hhhhhhhhhaaaaa
		<span>hhhhaaaaaaaasss</span>
	</h1>
	<h2>
		hhhhhhhhhbbbbbbbb
		<span>hhhhhbbbb</span>
	</h2>
	<h3>
		hhhhhhhhhhhhhccccccccc
		<span>hhhhhccccccssss</span>
	</h3>
	<input type="button" value="获取所有H1" onclick="getAllH1()" />
	<input type="button" value="获取content的H1" onclick="getCH1()" />
</body>
</html>

